<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
  <script src="/js/echarts.min.js" charset="utf-8"></script>
</head>

<body>
  <div id="main" style="width: 600px; height:400px;"></div>

  <script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    $.ajax({
      url: "http://localhost:8080/day58_ssm/Student/echartPie",
      data: {},
      success: function (resultInfo) {
        debugger
        // var nameList = [];
        // var sexValue = [];
        var arr = resultInfo.data;
        // for (var i = 0; i < arr.length; i++) {
        //   nameList.push(arr[i].name);
        //   sexValue.push(arr[i].value);
        // }

        option = {
          backgroundColor: '#2c343c',
          title: {
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: arr.sort(function (a, b) {
                return a.value - b.value;
              }),
              roseType: 'radius',
              label: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              labelLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              },
              itemStyle: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]
        };
        myChart.setOption(option);
      },
      dataType: "json"
    })

  </script>
</body>

</html>